<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>{$data.title}</title>
<link rel="stylesheet" href="__JS__/swiper/css/swiper.min.css">
<link rel="stylesheet" href="__CSS__/goods.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_342477_owwvl7ndgo.css?v=1.0.0">
<script type="text/javascript" src="__JS__/jquery.min.js"></script>
<script type="text/javascript" src="__JS__/swiper/js/swiper.min.js"></script>
<script type="text/javascript" src="__JS__/layer_mobile/layer.js"></script>
<script type="text/javascript" src="__JS__/common.js"></script>
</head>

<script>
var G_goods_id = '{$data.goods_id}';
var G_agent_id = '{$Think.const.AGENT_ID}';
</script>

<body>

<style>
body{ background: #f5f5f9; }
.litpic{ position:relative; width:100%; height:0; padding-top:100%; }
.litpic img{ position: absolute; top:0; height:100%; z-index:1; }
.goods-title{ padding:10px; font-size: 18px!important; line-height: 24px; border-bottom: 1px solid #edeef0!important; background: #fff; color: inherit;}
.goods-title span{ font-size: 14px; display:inline-block; line-height: 1em; background: #5c8dff; color:#ffffff; border-radius: 12px; padding: 5px 6px 4px; margin-left:10px; }
.goods-price{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; }
.goods-price p{ display:flex; flex:1; font-size:18px;  }
.goods-price p.l{ color:red; }
.goods-price p.r{ color:#9c9fa6!important; text-decoration: line-through; }

.goods-stock{ padding:2px 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; }
.goods-stock p{ display:flex; flex:1; font-size:14px;  }
.goods-stock p.l{ color:#9c9fa6; }
.goods-stock p.r{ color:#9c9fa6; }

.head{ margin:10px 0; display:flex; padding:5px 10px;background:#ffffff; }
.head .l{ flex:1; padding:0 5px; display:flex; height:50px; align-items: center; }
.head .l img{ width:50px; height:50px; border-radius:100%; }
.head .l span{ padding-left:10px; color:#333; }
.head .r{ width:25%; display:flex; height:40px; margin-top:5px; align-items: center; flex-flow: column; }
.head .r p{ height:50%; display:flex; align-items:center; }
.head .r p:nth-child(1){ color:#333333; }
.head .r p:nth-child(2){ color:#9c9fa6; }

.layui-layer-loading .layui-layer-content{ width:120px; height:48px; background-size:cover; }
.layui-m-layer-msg .layui-m-layercont{ font-size:28px; line-height:44px; padding:20px 40px;}
.layui-m-layer2 .layui-m-layercont i{ background:#5c8dff; }
</style>

<!--Flash-->
<div class="swiper-container">
	<div class="swiper-wrapper">
		{volist name='data.litpic' id='v' key='k'}
		<div class="swiper-slide">
			<div class='litpic'><img src='{$v}'></div>
		</div>
		{/volist}
	</div>
	<div class="swiper-pagination"></div>
</div>
<!--Flash End-->


<div class='goods-title'>{$data.title}<span style='display:none;'>云库存</span></div>
<div style='padding:10px; background:#ffffff;'>
	<div class='goods-price'>
		<p class='l'>进货价：&yen;{$data.price_input}</p>
		<p class='r'>零售价：&yen;{$data.price_sell}</p>
	</div>
	<div class='goods-stock'>
		<p class='l'>销售：{$data.total_amount}</p>
		<p class='r'>库存：{$data.stock}</p>
	</div>
</div>

<!--Head-->
<div class='head'>
	<div class="l">
		<img src="{$data.agent.headimg}" alt="头像">
		<span>{$data.agent.nickname}</span>
	</div>
	<a class="r" style='display:none' href="">
		<p>2</p>
		<p>分类选购</p>
	</a>
</div>
<!--Head End-->

<style>
.goods-detail{ position:relative; background:#ffffff;}
.detail-nav{ position:relative;height:43px; }
.detail-nav ul{ height:40px; display:flex; }
.detail-nav ul li{ flex:1; display:flex; justify-content:center; align-items:center; color:#333333; }
.detail-nav ul li:nth-child(1){ color:#5c8dff; }
.detail-nav-slide{ transition:all ease .3s; position:absolute; width:50%; bottom:0; left:0; height:2px; background:#5c8dff; }
.detail-box{ padding:10px 0; color:#333333; font-size:14px; line-height:1.5em; overflow:hidden; }
.detail-box img{ max-width:100%; }
.detail-box-big{ width:200%;overflow:hidden; }
.detail-item{ transition:all ease .3s; width:50%; float:left; padding:0 10px; }
.goods-detail2 .detail-nav ul li:nth-child(1){ color:#333333; }
.goods-detail2 .detail-nav ul li:nth-child(2){ color:#5c8dff; }
.goods-detail2 .detail-nav-slide{ left:50%; }
.goods-detail2 .detail-box-big .detail-item:nth-child(1){ margin-left:-50%; }
.goods-fixed{ position:fixed; top:0; left:0; width:100%; z-index:100; }
</style>
<!--Detial-->
<div id='goods-detail-bg'>
<div class='goods-detail'>
	<div class='detail-nav'>
		<ul id='detail-nav-tab'>
			<li>商品详情</li>
			<li>商品参数</li>
		</ul>
		<span class='detail-nav-slide'></span>
	</div>
	<div class='detail-box'>
		<div class='detail-box-big'>
			<div class='detail-item'>
				{volist name='data.detail' id='v'}
				<img src='{$v}' style='width:100%'>
				{/volist}
			</div>
			<div class='detail-item detail-spec'>
				{$data.spec}
			</div>
		</div>
	</div>
</div>
</div>
<!--Detial End-->


<!--Bottom Nav-->
<style>
.goods-bottom-nav{ height:50px; position:fixed; z-index:200; background:#ffffff; left:0; bottom:0; width:100%; box-shadow: 0 -1px 9.9px 0.1px rgba(0,0,0,.05); display:flex; }
.goods-bottom-nav-1{ flex:1; height:100%; }
.goods-bottom-nav-1 a{ height:100%; justify-content:center; align-items:center; display:flex; flex-flow: column; padding:5px 0; color:#333333; }
.goods-bottom-nav-1 a i{ flex:1; justify-content:center; align-items:center; display:flex;}
.goods-bottom-nav-1 a div{ flex:1; justify-content:center; align-items:center; display:flex;}
.goods-bottom-nav-2{ cursor:default; flex:2; justify-content:center; align-items:center; display:flex; background:#fa6f60; color:#ffffff; }
</style>
<div class="goods-bottom-nav">
	<div class="goods-bottom-nav-1">
		<a href="/">
			<i class="iconfont icon-home"></i>
			<div>首页</div>
		</a>
	</div>
	<div class="goods-bottom-nav-1">
		<a href="{:url('Order/cart')}">
			<i class="iconfont icon-cart"></i>
			<div>购物车</div>
		</a>
	</div>
	<span class="goods-bottom-nav-2">加入进货车</span>
</div>
<!--Bottom Nav End-->


<!--Back-->
<style>
.c-share-back {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 100px;
    z-index: 9;
    padding-left: 25px;
}
.c-share-back .__content {
    float: left;
    width: 35px;
}
.c-share-back .__icon {
    float: right;
    border-radius: 100%;
    text-align: center;
    background: rgba(0,0,0,.5);
    line-height: 35px;
    height: 35px;
    width: 35px;
    margin-top: -35px;
    color: #fff;
    font-size: 25px;
}
.icon-goback:before {
    content: "\e7a1";
}
</style>
<div class="c-share-back"><div class="__content"><i class="iconfont icon-goback __icon"></i></div></div>
<!--Back End-->

<!--Tocart-->
<style>
@keyframes g-slideUpEnter{
	0%{-webkit-transform:translateY(100%);transform:translateY(100%)}
	to{-webkit-transform:translate(0);transform:translate(0)}
}
.tocart-box-bg{ position:fixed; z-index:390; width:100%; height:100%;left:0;top:0; background:rgba(0,0,0,.2); display:none; }
.tocart-box{ position:fixed; z-index:400; background:#ffffff; width:100%; left:0; bottom:0; padding-bottom:10px; animation: g-slideUpEnter ease .4s; display:none;}
.tocart-goods-box{ position:relative; height:76px; }
.tocart-goods-box img{ position:absolute; width:100px; height:100px; left:10px; top:-25px; border-radius: 5px; overflow:hidden; }
.tocart-goods-info{ margin-left: 120px; font-size: 16px; color: #000; padding-top: 15px; margin-right:38px;}
.tocart-goods-title{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }
.tocart-goods-price{ color: #fa6f60!important; padding-top: 10px; }
.tocart-close{ font-size: 20px; color: #9c9fa6; position: absolute; right: 10px; top: 14px; font-weight: 400; font-style: normal; display: inline-block;}
.tocart-amount-box{ line-height: 44px; display: flex;padding-bottom: 10px; align-items: center; }
.tocart-amount-text{ font-weight: 400; font-style: normal; display: inline-block; padding-left: 10px; font-size:16px; flex: 1; color:#333333; }
.tocart-amount-action{ height: 30px; min-width: 110px; max-width: 145px; border-radius: 15px; border: 1px solid #e8e8e8; overflow: hidden; margin-right:10px; }
.tocart-amount-action:before{ display: table; content: " "; }
.tocart-amount-action:after{ clear:both; }
.tocart-amount-reduce{ width: 30px; height: 100%; float: left; color: #d1d1d1; background-color: #f1f1f1; line-height: 28px; text-align: center; background-color: #fbfbfb; pointer-events: auto;}
.tocart-amount-value{ float: left; width: 49px; color: #333; height: 30px; line-height: 30px; text-align: center; font-size: 16px; padding: 0 8px; border: 1px solid rgb(232, 232, 232); border-width:0 1px; background: rgb(241, 241, 241); }
.tocart-amount-add{ width: 30px; height: 100%; float: left; color: #d1d1d1; line-height: 28px; text-align: center;background-color: #fbfbfb; pointer-events: auto;}
.tocart-amount-desc{ color: #fa6f60!important; text-align: right; font-size:12px; margin-bottom: 15px; padding-right:10px; }

.layui-m-layer0 .layui-m-layerchild{ width:80%;}
.layui-m-layercont{ padding:20px; }
.layui-m-layerchild h3{ height:50px; line-height:50px; border-bottom: 1px solid #eaeaea; }
.layui-m-layerbtn{ height:40px; line-height:40px; }

#input_amount_value{ width:80%; height:34px; line-height:34px; border:1px solid #eaeaea; border-radius:17px; padding:0 10px; font-weight:bold; }
</style>
<div class='tocart-box-bg'></div>
<div class="tocart-box">
	<div class="tocart-goods-box">
		<img src="{$data.litpic[0]}">
		<div class="tocart-goods-info">
			<p class="tocart-goods-title">{$data.title}</p>
			<p class="tocart-goods-price">￥{$data.price_input}</p>
		</div>
		<i class="iconfont icon-close tocart-close"></i>
	</div>
	<div class="tocart-amount-box">
		<span class="tocart-amount-text">购买数量</span>
		<div class="tocart-amount-action">
			<div class="tocart-amount-reduce"><i class="iconfont icon-minus"></i></div>
			<div class="tocart-amount-value">{$data.buynum}</div>
			<div class="tocart-amount-add"><i class="iconfont icon-add"></i></div>
		</div>
	</div>
	<div class="tocart-amount-desc">调整数量后，即可实时变更进货车数量</div>
</div>
<!--Tocart End-->

<script>
var swiper = new Swiper('.swiper-container', {
	pagination: {
		el: '.swiper-pagination',
	},
	autoplay : {
		disableOnInteraction : false
	},
	loop : true
});
var detailBoxTop = 0;
$(function(){
	$('#detail-nav-tab').find('li').each(function(index){
		$(this).click(function(){
			if(index == 0){
				$(this).parents('.goods-detail').eq(0).removeClass('goods-detail2');
			}else{
				$(this).parents('.goods-detail').eq(0).addClass('goods-detail2');
			}
		});
	});
	detailBoxTop = $('.goods-detail').offset().top;
	$('#goods-detail-bg').css('height',$('#goods-detail-bg').height());
	$(document).scroll(function() {
		var scroH = $(document).scrollTop();
		console.log(scroH,detailBoxTop);
		if(scroH < detailBoxTop){
			//$('.goods-detail').removeClass('goods-fixed');
		}else{
			//$('.goods-detail').addClass('goods-fixed');
		}
	});
	
	$(".tocart-amount-value").click(function(){
		layer.open({
			type : 0,
			title : '请输入数量',
			btn : ['确认','取消'],
			//style: 'border:none; background-color:#78BA32; color:#fff;',
			content:"<div style=''><input type='text' id='input_amount_value'></div>",
			yes : function(index){
				var v = $('#input_amount_value').val();
				layer.close(index);
				if(v == ''){ return; }
				v = v.replace(/ /g,'');
				v = parseInt(v);
				if(isNaN(v)){
					showMsg('请输入数字');
					return; 
				}
				if(v < 1){
					showMsg('数量输入不正确');
					return; 
				}
				//$('.tocart-amount-value').html(v-1);
				//$('.tocart-amount-add').click();
				
				req_buynum(v);
			},
			no : function(){},
		});
	});
	$('.tocart-amount-reduce').click(function(){
		//showMsg('减量');
		let curr = parseInt($('.tocart-amount-value').html());
		if(isNaN(curr) || curr < 1){ curr=1; }
		curr--;
		
		req_buynum(curr);
	});
	$('.tocart-amount-add').click(function(){
		//showMsg('增量');
		let curr = parseInt($('.tocart-amount-value').html());
		if(isNaN(curr) || curr < 0){ curr=0; }
		curr++;
		
		req_buynum(curr);
		
		//layer.open({type: 2,time:1,shade: 'background-color: rgba(0,0,0,.3)'});
	});
	$('.tocart-close').click(function(){
		$('.tocart-box-bg').css('display','none');
		$('.tocart-box').css('display','none');
	});
	$('.goods-bottom-nav-2').click(function(){
		$('.tocart-box-bg').css('display','block');
		$('.tocart-box').css('display','block');
	});
});
function showMsg(msg){
	layer.open({
		content: msg
		,skin: 'msg'
		,time: 2
	});
}

function req_buynum(num){
	$.ajax({
		url : "{:url('Order/cart_add')}",
		type : 'POST',
		dataType : 'JSON',
		data : {'goods_id':G_goods_id,'amount':num},
		success : function(e){
			if(!e.flag){ layerMsg(e.info); }
			if(e.data.list && e.data.list.length > 0){
				$('.tocart-amount-value').html(e.data.list[0].buynum);
			}
		},error : function(){
		}
	});
}
</script>
<div style='height:60px;'></div>
</body>
</html>